/*
div.b_ChangeMakers{
    --section_padding_block:64px;
}
@media (width >= 1000px) {
    div.b_ChangeMakers{
        --section_padding_block:112px;
    }
} */



/*Intro*/
.b_ChangeMakers .intro{
    max-width:768px;
    margin-bottom:45px;
    display: grid;
    gap: 20px;
}
.b_ChangeMakers .intro .h5{
    margin-bottom:20px;
}
@media (width >= 1000px) {
    .b_ChangeMakers .intro{
        margin-bottom:110px;
    }
}




/*Profile*/
.b_ChangeMakers .member{
    cursor:pointer;
    position: relative;
}
.b_ChangeMakers .pic{
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    overflow: hidden;
    position:relative;
    place-items: center;
    /* border:0px solid var(--color_evergreen); */
    outline:0px solid var(--color_evergreen);
    outline-offset: -2px;
    margin-bottom: 24px;
    /* transition: border-width 0.3s; */
    transition: outline-width 0.3s, outline-offset 0.3s;
    max-width: 340px;
}
.b_ChangeMakers .pic img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
.b_ChangeMakers .text{
    margin-bottom:24px;
    display:grid;
    gap:10px;
}
.b_ChangeMakers .position{
    font-weight:700;
}
.b_ChangeMakers .corner{
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--color_evergreen);
    padding: 10px 100px 20px;
    transform: rotate(-45deg) translate(60px, 150px);
    transition: padding 0.3s, transform 0.3s;
}
.b_ChangeMakers .corner svg{
    transform: rotate(45deg);
}
.b_ChangeMakers a svg {
    color: var(--color_evergreen);
    width:50px;
    height:50px;
    transition: color 0.3s;
}



/* Hover Effect */
.b_ChangeMakers .member:hover {
    > .pic{
        outline-width: 10px;
        outline-offset: -10px;
    }

    > .pic .corner{
        transform: rotate(-45deg) translate(60px, 70px);
    }
    > .pic .name{
        text-decoration: underline;
    }
    svg {
        color: var(--color_deep_ocean);
    }
}




/*GRID*/
.b_ChangeMakers .col_4 {
    display: grid;
    gap: 50px 50px;
    grid-template-columns: 1fr;
}
@media (width >= 600px){
    .b_ChangeMakers .col_4 {
        grid-template-columns: 1fr 1fr;
        gap: 50px 50px;
    }
}
@media (width >= 1000px){
    .b_ChangeMakers .col_4 {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 110px 145px;
    }
}





/* POPUP */
.b_ChangeMakers dialog{
    position: absolute;
    top: 0;
    z-index: 1;
    background: var(--color_honey_glow);
    border: 0;
    border-radius: 30px;
    padding: 90px 32px 52px;
    width: 100%;
    margin-top: -90px;
    margin-left: -30px;
    overflow: hidden;
    height:430px;
    transition: height 0.25s;
}
@media (width >= 600px){
    .b_ChangeMakers dialog{
        width: calc(100% + 62px);
        left: 0;
        transform: unset;
    }
}
.b_ChangeMakers dialog [value=close]{
    position: absolute;
    top: 30px;
    right: 30px;
    padding: 0;
    width: 40px;
    height: 40px;
}
.b_ChangeMakers dialog [value=close]:hover{
    background: transparent;
    border-color: var(--color_honey_glow);
}